<template>

<div class="icons swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide" v-for="(item , index) in result">
			<div class="icons-item" v-for="txt in item" :key="txt.id">
				<img :src ="txt.imgUrl" />
				<p>{{txt.title}}</p>
			</div>
		</div>
	</div>
</div>

</template>

<script>
	import Swiper from 'swiper'
	export default{
		props:['IconList'],
		data(){
			return{
			
			}
		},
		mounted(){
					new Swiper('.icons',{
						// 重复滑动
						loop:true,
						observer:true,
						observerParents:true
					})
				},
				//计算属性
				computed:{
					result(){
						//1.设置一个空数组[一维数组]
						var arr = [];
						//2.forEach遍历：item ：数组元素：index：下标
						this.IconList.forEach((item , index)=>{
							//计算index下标 / 8 的向下取整结果
							var idx = Math.floor(index / 8);
							//判断计算结果相应的数组是否存在内容，如果没有声明一个空数组
							//针对第一次循环，声明下标 0 和 1 分别是个数组
							if( !arr[idx]){
								arr[idx] = [];
							} 
							//将每次循环的元素item 添加到当前合适的下标数组内
							
							arr[idx].push(item);
						})
						return arr;
					}
				}
	}

</script>

<style scoped>
	.icons{
		width: 100%;
		/* overflow: hidden; */
		background-color: white;
		padding-top: 0.2rem;
	}
	.icons-item{
		/* background-color: white; */
		width: 25%;
		padding-bottom: 25%;
		height: 0;
		float: left;
	}
	.icons-item img{
		width: 1.1rem;/* 55px */
		height: 1.1rem;
		display: block;
		margin: 0 auto;
	
	}
	.icons-item p{
		font-size: 0.32rem;
		text-align: center;
		color: #212121;
		margin-top: 0.2rem;
	}
</style>
